<template>
  <BasicTable @register="registerTable" style="box-sizing: border-box">
    <template #toolbar>
      <a-button v-if="!$props.isAdd" type="error" @click="deleteRows">取消关联</a-button>
      <a-button v-if="!$props.isAdd" type="primary" @click="emit('addM2m')">关联</a-button>
    </template>
  </BasicTable>
</template>

<script lang="ts" setup>
  import { BasicTable, useTable } from '@/components/Table';
  interface props {
    tableConfig: any;
    data?: any;
    isAdd: boolean;
  }
  interface Emits {
    (e: 'addM2m'): void;
    (e: 'deleteRows', value: any[]): void;
  }
  const emit = defineEmits<Emits>();
  const $props = defineProps<props>();
  const deleteRows = () => {
    const rowKeys = getSelectRowKeys();
    emit('deleteRows', rowKeys);
  };
  const [registerTable, { reload, setProps, getSelectRowKeys, clearSelectedRowKeys }] =
    useTable(null);
  watch(
    () => $props.tableConfig.tableKey,
    () => {
      if ($props.tableConfig.tableKey) {
        nextTick(() => {
          setProps($props.tableConfig);
          console.log('我是一个分界线');
          setProps(toRaw($props.tableConfig));
        });
      }
    },
    { immediate: true },
  );

  watch(
    () => $props.tableConfig.searchInfo,
    () => {
      nextTick(() => {
        reload();
        clearSelectedRowKeys();
      });
    },
  );
  defineExpose({ reload, getSelectRowKeys, clearSelectedRowKeys, setProps });
</script>
<style lang="less" scoped></style>
